import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import axios from 'axios'
import { ref, reactive } from 'vue'
export function useData() {
    let list = reactive({
        allList: [],
        cqlist: []
    })

    let adcode = ref(100000)
    let lakeLayerstyleNew = reactive({
        weight: 2,  //外边框宽度
        opacity: 0.2,
        color: 'black',//外边框颜色
        fillOpacity: 0.2,//填充透明度
        fillColor: '#ffffff'//填充的颜色5cbcfc
    })
    let cqLayerstyleNew = reactive({
        weight: 2,  //外边框宽度
        opacity: 0.2,
        color: 'black',//外边框颜色
        fillOpacity: 0.2,//填充透明度
        fillColor: '#88cfff'//填充的颜色5cbcfc
    })
    let level = ref('province')
    // 获取geojson数据
    const getData = function (map) {
        if (level.value == 'district') {
            return
        } else {
            axios.get('https://geo.datav.aliyun.com/areas_v3/bound/' + `${adcode.value}` + '_full.json')
                .then(function (res) {
                    console.log('res', res);
                    list.allList = res.data
                    let parentCode = 100000
                    // 创建 GeoItem
                    const GeoItem = L.layerGroup()
                    map.addLayer(GeoItem)
                    // 创建geoJson图层
                    const lakeLayer = L.geoJson(list.allList, {
                        style: lakeLayerstyleNew,
                        onEachFeature: ((feature, layer) => { //对每个小块进行定义
                            layer.on({
                                //鼠标移入方法
                                mouseover: (() => {
                                    parentCode = feature.properties.parent.adcode
                                    // 移入的效果
                                    if (parentCode == adcode.value) {
                                        layer.setStyle({
                                            weight: 2,
                                            color: '#2f8ffc',
                                            fillColor: 'pink',
                                            fillOpacity: 0.4,
                                        });
                                    }
                                }),
                                //鼠标移出方法
                                mouseout: (() => {
                                    if (parentCode == adcode.value) {
                                        layer.setStyle(lakeLayerstyleNew);
                                    }
                                }),
                                //点击方法，变色
                                click: (() => {
                                    layer.setStyle({
                                        weight: 4,
                                        color: 'red',
                                        fillColor: '#ffffff',
                                        fillOpacity: 0.4,
                                    });
                                    // 获取code
                                    adcode.value = feature.properties.adcode;
                                    level.value = feature.properties.level
                                }),
                            });
                        })
                    }).bindTooltip(function (layer) {  // 只要使用这个bindTooltip方法，
                        // 弹框内容
                        let content = 'adcode:' + `${layer.feature.properties.adcode}` + '<br/>' + 'name:' + `${layer.feature.properties.name}` + '<br/>' + 'level:' + `${layer.feature.properties.level}`
                        return content;
                    }).addTo(GeoItem);

                    //定位到该图层 显示geoJson图层整个视图，若不加，则会展示初始位置视图范围
                    // 用于调整地图的视图以适应指定的边界。
                    map.fitBounds(lakeLayer.getBounds());
                })
                .catch(function (error) {
                    console.log(error);
                })
            axios.get('https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json')
                .then(function (res) {
                    console.log(res);
                    list.cqlist = res.data
                    L.geoJson(list.cqlist, {
                        style: cqLayerstyleNew,
                    }).addTo(map)
                })
        }
    }

    return getData

}
